import React from 'react'
import { connect } from 'react-redux'
import Styled from 'styled-components'
import { projectLabelView as projectDuck } from 'ducks'
import { Table, Icon, Label } from 'semantic-ui-react'

const TagLabel = ({ color }) => (
  <Label
    style={{ minWidth: '1.0em', minHeight: '1.0em', backgroundColor: color }}
    size="small"
    circular
  />
)

const StyledColumn = Styled(Table.Cell)`
  padding-left: .5em !important; 
  padding-right: .2em !important;
  border-top: 0px !important;
`

const StyledColumnPointer = Styled(Table.Cell)`
  padding-left: .5em !important; 
  padding-right: .2em !important;
  border-top: 0px !important;
  cursor: pointer;
`

const StyledColumnNum = Styled(Table.Cell)`
  padding-left: .0em !important; 
  padding-right: .2em !important;
  border-top: 0px !important;
  cursor: pointer;
`

const LabelRow = ({
  label,
  index,
  classes,
  actionHide,
  actionDelete,
  editLabelId,
  actionSetEditLabelId,
}) => {
  let cname = 'label-row'
  const active = editLabelId === label.id
  if (active) cname = 'label-row-active'
  const hide = label.hide === true
  const hideIconName = hide ? 'hide' : 'unhide'
  const action = () => {
    actionSetEditLabelId(label.id)
  }
  return (
    <Table.Row className={cname}>
      <StyledColumnPointer collapsing width={1}>
        <Icon className="label-left-icon" name="triangle right" />
      </StyledColumnPointer>
      <StyledColumnNum collapsing width={1} onClick={action}>
        {index}
      </StyledColumnNum>
      <StyledColumnPointer collapsing width={1} onClick={action}>
        <TagLabel color={classes[label.class_id].color} />
      </StyledColumnPointer>
      <StyledColumnPointer collapsing width={4} onClick={action}>
        {classes[label.class_id].name}
      </StyledColumnPointer>
      <StyledColumnPointer collapsing onClick={action} />
      <StyledColumn collapsing textAlign="right">
        <Icon
          className="label-left-hidden-icon"
          name="trash"
          onClick={() => actionDelete(projectDuck.creators.actionDeleteServer, label.id, index)}
        />
        <Icon
          className="label-left-icon"
          name={hideIconName}
          onClick={() => actionHide(label.id, !hide)}
        />
      </StyledColumn>
    </Table.Row>
  )
}

const mapStateToProps = (state, ownProps) => ({
  label: projectDuck.selectors.label(state, ownProps.id),
  classes: projectDuck.selectors.classes(state),
  editLabelId: projectDuck.selectors.editLabelId(state),
})

const mapDispatchToProps = {
  actionHide: projectDuck.creators.actionToggleHide,
  actionDelete: projectDuck.creators.actionResetEditAndDo,
  actionSetEditLabelId: projectDuck.creators.actionSetEditLabelId,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(LabelRow)
